<template>
  <!-- 机构作业范围 -->
  <div class="jobarea-container">
    <div class="jobarea-row">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-tree
              ref="tree"
              node-key="id"
              :expand-on-click-node="false"
              :data="depts"
              :props="defaultProps"
              highlight-current
              check-strictly
            />
          </div>
          <!-- @node-click="handleNodeClick" -->
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple-dark">
            <!-- <div class="jobarea-top">
              <span>请输入关键字:</span>
              <el-input v-model="inputvalue" type="text" prefix-icon="el-icon-search" placeholder="请输入关键字" style="width:300px;margin-left: 20px;" />
            </div>
            <div id="container" /> -->
            <Map ref="map" @updateLocation="updateLocation" />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <Footer /> -->
  </div>
</template>
<script>
// import AMapLoader from '@amap/amap-jsapi-loader'
import { getTree } from '@/api/essentialData'
import Map from '@/components/aliMap'
export default {
  components: {
    Map
  },
  data() {
    return {
      inputvalue: '',
      // 菜单机构
      depts: [],
      // tree 树形菜单
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getTrees()
  },
  // mounted() {
  //   AMapLoader.load({
  //     key: '	405f5fe95d96b1a88aab4334c8653c75',
  //     version: '2.0',
  //     plugins: []
  //   }).then((AMap) => {
  //     this.map = new AMap.Map('container', {
  //       resizeEnable: true,
  //       rotateEnable: true,
  //       pitchEnable: true,
  //       zoom: 17,
  //       pitch: 80,
  //       rotation: -15,
  //       viewMode: '3D', // 开启3D视图,默认为关闭
  //       buildingAnimation: true // 楼块出现是否带动画 // 地图模式
  //     })
  //   }).catch((e) => {
  //     console.log(e)
  //   })
  // },
  methods: {
    async getTrees() {
      const res = await getTree()
      // console.log(res)
      // console.log(JSON.parse(res.data.data))
      // 获取树状机构信息
      this.depts = JSON.parse(res.data.data)
      console.log(this.depts)
    },
    updateLocation(Addr) {
      console.log('位置信息：', Addr)
    }
  }
}
</script>

<style lang="scss" scoped>
.jobarea-container{
  padding: 20px;

  .jobarea-row{
    margin-bottom: 40px;
    .el-row {
    margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #fff;
      height: 800px;
    }
    .bg-purple {
      background: #fff;
      height: 800px;
    }
    .bg-purple-light {
      background: #fff;
    }
    .grid-content {
      border-radius: 4px;
      padding: 20px 20px 0 20px;
      .jobarea-top{
        height: 80px;
        line-height: 80px;
      }
    }
    .bg-purple-bottom {
      margin-top: 20px

    }

  }
}
#container{
  height: 670px;
}
</style>
